<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>十万条数据</title>
</head>
<body>
  <div>

  </div>
  <script>
    function loadAll (response) {
      var groups = group(response);
      for (var i = 0; i < groups.length; i++) {
        //闭包， 保持i值的正确性
        window.setTimeout(function () {
            var group = groups[i];
            var index = i + 1;
            return function () {
                //分批渲染
                loadPart( group, index );
            }
        }(), 1);
      }
    }

    function group (data) {
      var result = [];
      var groupItem;
      for (let i = 0; i < data.length; i++) {
        if (i % 500 === 0) {
          groupItem != null && result.push(groupItem);
          groupItem = [];
        }
        groupItem.push(data[i]);
      }
      result.push(groupItem);
      return result;
    }

    // 加载某一批数据
    var currIndex = 0
    function loadPart (group, index) {
      var html = '';
      for (let i = 0; i < group.length; i++) {
        var item = group[i];
        html += `<li>${item.title}</li>`
      }
      //保证顺序不错乱
      while (index - currIndex == 1) {
        $("#content").append(html);
        currIndex = index;
      }
    }
  </script>
</body>
</html>